<template>
  <div :inline="true" class="dashboard-container">
    <!-- 搜索区域 -->
    <div class="app-container">
      <el-form size="mini" :inline="true" class="demo-form-inline">
        <el-form-item label="关键字">
          <el-input v-model="query.keyword"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="query.keyword = ''">清除</el-button>
          <el-button type="primary" @click="queryTopic">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- <el-card shadow="never"> 组题列表 </el-card> -->
      <el-alert :closable="false" type="info"
        ><i class="el-icon-info"> 数据一共 {{ this.query.total }} 条</i>
      </el-alert>
      <!-- 组题数据列表区域 -->
      <el-table class="boxBack" :data="topicList" style="width: 100%">
        <el-table-column prop="id" label="编号"> </el-table-column>
        <el-table-column width="70" label="题型">
          <template #default="{ row }">
            {{ dictionariesO(row.questionType) }}
          </template>
        </el-table-column>
        <el-table-column label="题目编号">
          <template #default="{ row }">
            <span
              @click="lookTopic(item.id)"
              :key="index"
              v-for="(item, index) in row.questionIDs"
              style="color: rgb(20, 141, 240); cursor: pointer"
            >
              {{ item.number }}<br />
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间(s)"> </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)">
        </el-table-column>
        <el-table-column prop="userName" label="录入人"> </el-table-column>
        <el-table-column width="70" label="操作">
          <template #default="{ row }">
            <el-button
              plain
              type="danger"
              icon="el-icon-delete"
              circle
              @click="delTopic(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        small
        background
        @current-change="topicSkip"
        @size-change="pageData"
        :current-page="query.page"
        :page-sizes="[20, 10, 5]"
        :page-size="query.pagesize"
        layout="  prev, pager, next,sizes,jumper"
        :total="query.total"
        class="paging"
      >
      </el-pagination>
    </div>
    <!-- 题目详情 -->
    <el-dialog
      @close="close"
      title="题目预览"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <!-- <span>这是一段信息</span> -->
      <el-row :gutter="20">
        <el-col class="biankuang" :span="6">
          【题型】：{{ dictionariesO(particulars.questionType) }}
        </el-col>
        <el-col class="biankuang" :span="6">
          【编号】：{{ particulars.id }}
        </el-col>
        <el-col class="biankuang" :span="6">
          【难度】：{{ difficultyO(particulars.difficulty) }}
        </el-col>
        <el-col class="biankuang" :span="6">
          【标签】：{{ particulars.tags }}
        </el-col>
        <el-col class="biankuang" :span="6">
          【学科】：{{ particulars.subjectID }}
        </el-col>
        <el-col class="biankuang" :span="6">
          【目录】：{{ particulars.catalogID }}
        </el-col>
        <el-col class="biankuang" :span="6">
          【方向】：{{ particulars.direction }}
        </el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col v-html="'【题干】：' + particulars.question" :span="24">
          【题干】：{{ particulars.question }}
        </el-col>
        <br />
        <el-col :span="24">选项：（以下选中的选项为正确答案）</el-col>
        <!-- 单选 -->
        <el-col :span="8" v-if="particulars.questionType === '1'">
          <span v-if="particulars.options">
            <el-radio
              v-for="(item, index) in particulars.option"
              :key="item.id"
              v-model="radio"
              :label="index"
            >
              {{ item.title }}
            </el-radio>
          </span>
          <span v-else>无法获取数据</span>
        </el-col>
        <!-- 多选 -->
        <el-col :span="8" v-else-if="particulars.questionType === '2'">
          <span v-if="particulars.options">
            <el-checkbox
              v-model="checked"
              v-for="item in particulars.option"
              :key="item.id"
            >
              {{ item.title }}
            </el-checkbox>
          </span>
          <span v-else>无法获取数据</span>
        </el-col>
        <!-- 简答 -->
        <el-col :span="8" v-else-if="particulars.questionType === '3'">
          <span v-if="particulars.options">
            <el-input
              v-for="item in particulars.option"
              :key="item.id"
              :v-model="item.title"
              :disabled="true"
            ></el-input>
          </span>
          <span v-else>无法获取数据</span>
        </el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col
          >【参考答案】：
          <el-button
            class="showVideoBut"
            @click="showVideo = true"
            type="danger"
          >
            视频答案预览
          </el-button>
        </el-col>
        <video controls v-show="showVideo" :src="particulars.videoURL">
          {{ particulars.videoURL }}
        </video>
      </el-row>
      <hr />
      <el-row>
        <el-col
          class="biankuang"
          :span="24"
          v-html="'【答案解析】：' + particulars.answer"
        ></el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col class="biankuang" :span="24">
          【题目备注】：{{ particulars.remarks }}
        </el-col>
      </el-row>
      <hr />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
export default {
  data () {
    return {

      radio: '1',
      // 题目详情
      particulars: {},
      // 控制答案视频
      showVideo: false,
      dialogVisible: false,
      // 数据字典
      dictionaries: [{ id: 1, value: '单选' }, { id: 2, value: '多选' }, { id: 3, value: '简答' }],
      difficulty: [{ id: 1, value: '简单' }, { id: 2, value: '一般' }, { id: 3, value: '困难' }],
      // 存储获取的列表数据
      topicList: [],
      // 分页信息
      // 关键字查询
      query: {
        page: 1,
        pagesize: 10,
        total: 100,
        keyword: ''
      }
    }
  },
  created () {
    this.getTopic()
  },
  methods: {
    // 关闭预览对话框初始化
    close () {
      // 将视频重新隐藏
      this.showVideo = false
      this.particulars = {}
    },
    // 题目详情
    async lookTopic (id) {
      try {
        this.dialogVisible = true
        // console.log(id)
        const { data } = await detail({ id })
        this.particulars = data
        // console.log(data)
        this.$message.error(data.error)
      } catch (error) {
        console.log(error)
      }
    },
    // 删除功能
    async delTopic (row) {
      // 接口处.id了，所以这里不需要id
      // console.log(id)
      try {
        await this.$confirm('确定要删除吗？')
        // console.log(id)
        await removeRandoms(row)
        // console.log('231', data)

        this.$message.success('删除成功')
        this.getTopic()
      } catch (error) {
        console.log(error)
      }
    },
    // 获取列表数据
    async getTopic () {
      const { data } = await randoms(this.query)
      // console.log(data.items)
      // 存储列表数据
      this.topicList = data.items
      // 存储总数
      // console.log(this.topicList)
      this.query.total = data.counts
    },
    // 查询功能实现
    async queryTopic () {
      const { data } = await randoms(this.query)
      // console.log(data.items)
      // this.topicList = []
      this.topicList = data.items
      // 存储总数
      this.query.total = data.counts
    },
    // 切换页码
    topicSkip (page) {
      // console.log(page)
      this.query.page = page
      this.getTopic()
    },
    // 切换每一页显示的数据
    pageData (pagesize) {
      // console.log(pagesize)
      this.query.pagesize = pagesize
      this.getTopic()
    },
    // 数据字典
    dictionariesO (type) {
      const map = {}
      this.dictionaries.forEach(item => {
        map[item.id] = item.value
      })
      // 返回根据map获取到的码值，给模板渲染
      return map[type]
    },
    difficultyO (type) {
      const map = {}
      this.difficulty.forEach(item => {
        map[item.id] = item.value
      })
      return map[type]
    }
  }
}
</script>

<style scoped>
.showVideoBut {
  display: inline-block;
}
.biankuang {
  margin: 10px 0;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
.paging {
  display: flex;
  justify-content: flex-end;
}
.demo-form-inline {
  display: flex;
  justify-content: space-between;
  margin-left: 20px;
}
::v-deep.dashboard-container {
  background-color: #fff;
  margin: 10px 8px 0px 8px;
}
.boxBack {
  /* margin-top: 10px; */
  padding-top: 10px;
}
</style>
